<template>
	<view class="content">
		<u-navbar
			title="订单"
			@leftClick="leftClick"
      :placeholder="true" :safeAreaInsetTop="true" bgColor="transparent"
		>
		<!-- <view class="nav-slot-rigth" slot="right">
			<text>管理</text>
		</view> -->
		</u-navbar>
		 <u-tabs :list="list1"
		  :current="number"
		  lineColor="#025E21"
		  :activeStyle="{
			  color:'#2ab55d'
		  }"
		  lineWidth="28"
		  @change="tabswitch"
		  ></u-tabs>
		  <scroll-view scroll-y="true" class="scroll-Y" lower-threshold="20" @scrolltolower='renew'>
			<OrderIntel :orderList="orderList" @payobj="orderapi"></OrderIntel>
			<view v-if="orderList.length === 0" class="empty">暂未没有查到此类信息~</view>
			<u-loadmore :status="status" />
		  </scroll-view>
	</view>
</template>

<script>
	import orderintel from '@/components/oderintel/orderintel.vue'
	import {getorderlist} from '@/api/commodity.js'
	export default{
		data(){
			return{
				status:'loadmore',
				count:null,
				number:0,
				order:{
					page:1,
					limit:10
				},
				list1:[
					{name:"全部",state:''},
					{name:"待支付",state:'10'},
					{name:"待发货",state:'20'},
					{name:"待收货",state:'30'},
					{name:"退款/售后",state:'50'},
					{name:"已完成",state:'40'}
				],
				orderList:[]
			}
		},
		methods:{
			leftClick(){
				uni.switchTab({
					url:'/pages/my/my'
				})
			},
			tabswitch(el){
					this.order.page = 1
					this.order.state = el.state
					this.orderapi()
			},
			async orderapi(){
				const {data} = await getorderlist(this.order)
				this.orderList = data.data
				this.count = data.count
				this.count>this.orderList.length?this.status='loadmore':this.status='nomore'
			},
			async renew(){
				if(this.count>this.orderList.length){
					this.order.page++
					this.status = 'loading'
					const {data} = await getorderlist(this.order)
					this.orderList.push(...data.data)
					this.status = 'loadmore'
				}else{
					this.status = 'nomore'
				}
			}
		},
		components:{
			OrderIntel:orderintel
		},
		onLoad(el) {
			if(el.state || el.number){
				this.number = el.num
				this.order.state = el.state
			}
			this.orderapi()
		}
	}

</script>

<style lang="scss">
	page{
		background-color: #fafafa;
	}
	.content{
		padding: 0rpx 40rpx 0rpx 40rpx;
	}
	.scroll-Y{
		height:1240rpx ;
		padding-bottom: 100rpx;
		.empty{
			color: #999;
			font-size: 28rpx;
			text-align: center;
			margin-top: 60rpx;
		}
	}
</style>